﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>湖南理工学院-ACM</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="css/play.css" type="text/css" />
    <script type="text/javascript" src="js/jquery.easing.js" ></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var kv_num = 0;
			var total=$(".kv_pic li").length;
            function nextKv(){
                $(".control").attr("style","pointer-events:none");
                kv_num++;
                if(kv_num==total){kv_num=0;}
                $(".kv_pic").animate({ left:-1000*kv_num},{ easing: 'easeInOutQuad', duration: 500, complete: function(){
                    $(".control").attr("style","pointer-events:auto");
                }});
                $(".kv_word>ul").stop().animate({ left:-340*kv_num},{ easing: 'easeInOutQuad', duration: 800, complete: function(){}});
                $(".kv_dot ul li").removeClass("action").eq(kv_num).addClass("action");
            }
            function prevKv(){
                $(".control").attr("style","pointer-events:none");
                kv_num--;
                if(kv_num==-1){kv_num=total-1;}
                $(".kv_pic").animate({ left:-1000*kv_num},{ easing: 'easeInOutQuad', duration: 500, complete: function(){

                    $(".control").attr("style","pointer-events:auto");
                }});
                $(".kv_word>ul").stop().animate({ left:-340*kv_num},{ easing: 'easeInOutQuad', duration: 800, complete: function(){}});
            }
            $(".control .next").on("click",nextKv);
            $(".control .prev").on("click",prevKv);
            // 自动轮播
            setInterval(nextKv,3500);

        });
    </script>
</head>
<body>
<div id="main_wrap">
    <div class="warp">
        <div id="head">
            <div class="logo">
                <img class="logo_pic" src="images/logo.png" alt="LOGO">
            </div>
            <div id="nav">
                <div class="nav_bg">
                    <div class="nav_wrap">
                        <ul class="nav_wrap">
                            <a href="index.html"><li class="select_nav">首页</li></a>
                            <a href=""><li>论坛</li></a>
                            <a href="source.html"><li>资源</li></a>
                            <a href="ojdaohang.html"><li>OJ导航</li></a>
                            <a href="result.html"><li>历届成果</li></a>
                            <a href="about.html"><li>关于我们</li></a>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="main_content">

                <div class="main">
                    <div class="kv">
                        <div class="kv_border">
                            <ul class="kv_pic">
                                <li><img src="images/index_kv1.jpg" alt="" /></li>
                                <li><img src="images/index_kv2.jpg" alt="" /></li>
                                <li><img src="images/index_kv3.jpg" alt="" /></li>
                                <li><img src="images/index_kv4.jpg" alt="" /></li>
								<li><img src="images/index_kv4.jpg" alt="" /></li>
                            </ul>
                        </div>
                        <div class="kv_word">
                            <ul>
                                <li>
                                    <h3 class="tit1">家属开放日</h3>
                                    <h3 class="tit2">感谢有你 一路同行</h3>
                                    <p>为感谢家人们对居士们的默默支持与理解，西山居会在每一年邀请家属们参加一年一度的家属开放日，感受西山居的环境文化和办公氛围。</p>
                                </li>
                                <li>
                                    <h3 class="tit1">2014神觅会</h3>
                                    <h3 class="tit2">玩转创意 游戏穿越</h3>
                                    <p>是否幻想过把游戏场景搬到现实生活中？是否憧憬过穿越进游戏里当一回英雄侠士驰骋江湖？西山居士玩转创意，将梦想中的世界在你我身边呈现。我们在办公中游戏，在游戏中办公！！</p>
                                </li>
                                <li>
                                    <h3 class="tit1">西山居俱乐部</h3>
                                    <h3 class="tit2">Hello，西山居俱乐部！</h3>
                                    <p>在这里，我们为你寻找志同道合的朋友；在这里，我们为你丰富枯燥的业余生活。摄影、羽毛球、乒乓球、足球、游泳、篮球……准备好加入我们了吗？</p>
                                </li>
                                <li>
                                    <h3 class="tit1">2015西山居年会</h3>
                                    <h3 class="tit2">纵情聚·变  同享盛事</h3>
                                    <p>每一年总有一晚，我们把酒言欢，共叙期许；每一年总有一刻，我们拥抱佳绩，共聚一堂。这是一个大家庭，这是一个大江湖，各路英雄豪杰共进西山居年夜饭，满载而归结束一年的辛劳。</p>
                                </li>
                                <li>
                                    <h3 class="tit1">西山居俱乐部11</h3>
                                    <h3 class="tit2">Hello，西山居俱乐部！</h3>
                                    <p>在这里，我们为你寻找志同道合的朋友；在这里，我们为你丰富枯燥的业余生活。摄影、羽毛球、乒乓球、足球、游泳、篮球……准备好加入我们了吗？</p>
                                </li>
                            </ul>
                        </div>
                        <div class="control">
                            <div class="prev"><img src="images/icons_move_left.jpg" alt="" /></div>
                            <div class="next"><img src="images/icons_move_right.jpg" alt="" /></div>
                        </div>
                        <div class="kv_dot">
                            <ul>
                                <li class="action"></li>
                                <li></li>
                                <li></li>
                                <li></li>
								<li></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="artile_info box">
                    <div class="info_title">
                        <img src="./icons/flag.png" alt="ACM">
                        <h3>论坛精华</h3>
                        <a href="news.html">+更多+</a>
                    </div>
                    <div class="info">
                        <ol>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通知.</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通知.</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通知.</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="ol_left">通知通知通知通知通知通知通知.</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>

                        </ol>
                    </div>
                </div>
                <div class="one_line"></div>
                <div class="acm_info box">
                    <div class="info_title">
                        <img src="./icons/horn.png" alt="ACM">
                        <h3>ACM通知公告</h3>
                        <a href="news.html">+更多+</a>
                    </div>
                    <div class="info">
                        <ol>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="ol_left">通知通知通知通知通知通知通知啊啊啊啊啊啊</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>

                        </ol>
                    </div>
                </div>

                <div class="notice">
                    <div class="info_title">
                        <img src="./icons/notice.png" alt="ACM">
                        <h3>站内公告</h3>
                        <a href="news.html">+更多+</a>
                    </div>
                    <div class="info">
                        <ol>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通通知通知吱吱吱纸质</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="new.html">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="ol_left">通知通知通知通知通知通知通知..</span>
                                    <span class="ol_right">2016-12-06</span>
                                </a>
                            </li>

                        </ol>
                    </div>
                </div>
            </div>
            <div class="recommend">
                <div class="recommend_title">
                    <img src="./icons/jiangbei.png" alt="">
                    <h3>优秀作品展示</h3>
                </div>
                <div class="recommend_content">
                    <div class="recommend_content_wrap">
                        <div class="sph">

                            <div class="spbq">
                                <div class="biankuang biankuang_1"></div>
                                <div class="biankuang biankuang_2"></div>
                                <div class="biankuang biankuang_3"></div>
                                <div class="biankuang biankuang_4"></div>
                                <a href="#"><div class="zst"><img src="images/0-135.jpg" alt=""></div><h2>项目名</h2><span>项目介绍项目介绍</span><b>参赛队员：xxx，xxx，xxx</b></a>
                                <div class="text_gobuy">
                                    <img src="icons/medal.png" alt="">
                                    <br/>
                                    <p>荣获湖南省程序设计竞赛xxx奖</p>
                                    <br/>
                                </div>
                            </div>

                            <div class="spbq">
                                <div class="biankuang biankuang_1"></div>
                                <div class="biankuang biankuang_2"></div>
                                <div class="biankuang biankuang_3"></div>
                                <div class="biankuang biankuang_4"></div>
                                <a href="#"><div class="zst"><img src="images/0-135.jpg" alt=""></div><h2>项目名</h2><span>项目介绍项目介绍</span><b>参赛队员：xxx，xxx，xxx</b></a>
                                <div class="text_gobuy">
                                    <img src="icons/medal.png" alt="">
                                    <br/>
                                    <p>荣获湖南省程序设计竞赛xxx奖</p>
                                    <br/>
                                </div>
                            </div>

                            <div class="spbq">
                                <div class="biankuang biankuang_1"></div>
                                <div class="biankuang biankuang_2"></div>
                                <div class="biankuang biankuang_3"></div>
                                <div class="biankuang biankuang_4"></div>
                                <a href="#"><div class="zst"><img src="images/0-135.jpg" alt=""></div><h2>项目名</h2><span>项目介绍项目介绍</span><b>参赛队员：xxx，xxx，xxx</b></a>
                                <div class="text_gobuy">
                                    <img src="icons/medal.png" alt="">
                                    <br/>
                                    <p>荣获湖南省程序设计竞赛xxx奖</p>
                                    <br/>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="foot">
        <div class="foot_wrap">
            <img src="images/logo.png" alt="">

            <div class="foot_info">
                Copyright  湖南理工学院 2010-2015 . All Rights Reserved. <br>
                湘ICP备05003891号  湘教QS3-200505-000078 湘公网安备 43060202000045号<br>
                校址：湖南省岳阳市学院路　邮编：414006 电话：0730-8640001 投稿邮箱：hnistxcb@163.com
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
//1899 1438
$(document).ready(function(){
    $(".nav_wrap").css("width",$(".nav_wrap li").length*100+"px");
    $("#main_wrap").css("width",window.screen.width-21+"px");
    $("#foot").css("width",window.screen.width-21+"px");

    var box_max_length=34;//ACM通知和论坛长度超过省略
    var notice_max_length=28;//站内通知长度超过省略
    var GetLength = function (str) {
        ///<summary>获得字符串实际长度，中文2，英文1</summary>
        ///<param name="str">要获得长度的字符串</param>
        var realLength = 0, len = str.length, charCode = -1;
        for (var i = 0; i < len; i++) {
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) realLength += 1;
            else realLength += 2;
        }
        return realLength;
    };


    //js截取字符串，中英文都能用
    //如果给定的字符串大于指定长度，截取指定长度返回，否者返回源字符串。
    //字符串，长度

    /**
     * js截取字符串，中英文都能用
     * @param str：需要截取的字符串
     * @param len: 需要截取的长度
     */
    function cutstr(str, len) {
        var str_length = 0;
        var str_len = 0;
        str_cut = new String();
        str_len = str.length;
        for (var i = 0; i < str_len; i++) {
            a = str.charAt(i);
            str_length++;
            if (escape(a).length > 4) {
                //中文字符的长度经编码之后大于4
                str_length++;
            }
            str_cut = str_cut.concat(a);
            if (str_length >= len) {
                str_cut = str_cut.concat("...");
                return str_cut;
            }
        }
        //如果给定字符串小于指定长度，则返回源字符串；
        if (str_length < len) {
            return str;
        }
    }

    $(".notice .info .ol_left").each(function(index, element) {

        console.log(GetLength($(this).text()));
        console.log($(this).text());

        if (GetLength($(this).text()) > box_max_length) {
            $(this).text(cutstr($(this).text(), box_max_length));
        }



    });

    $(".box .info .ol_left").each(function(index, element) {

        console.log(GetLength($(this).text()));
        console.log($(this).text());

        if (GetLength($(this).text()) > notice_max_length) {
            $(this).text(cutstr($(this).text(), notice_max_length));
        }



    });




//
    //边框效果--移入
    function biankuang(obj){
        $(obj).find('.biankuang_1').stop(true).animate({
            height:'305px'
        },300)
        $(obj).find('.biankuang_2').stop(true).delay(300).animate({
            width:'360px'
        },300)
        $(obj).find('.biankuang_3').stop(true).animate({
            height:'305px'
        },300)
        $(obj).find('.biankuang_4').stop(true).delay(300).animate({
            width:'360px'
        },300)
    }
    //边框效果--移出
    function biankuang1(obj){

        $(obj).find('.biankuang_1').stop(true).delay(100).animate({
            height:'0px'
        },100)
        $(obj).find('.biankuang_2').stop(true).animate({
            width:'0px'
        },100)
        $(obj).find('.biankuang_3').stop(true).delay(100).animate({
            height:'0px'
        },100)
        $(obj).find('.biankuang_4').stop(true).animate({
            width:'0px'
        },100)
    }
    //触发
    $('.spbq').hover(
        function () {
            var obj = $(this);
            $(obj).find('.text_gobuy').addClass('text_gobuy_show');
            $(obj).find('.search_y').animate({left:'150',opacity:1},300);
            biankuang(obj);
        },
        function () {
            var obj = $(this);
            $(obj).find('.text_gobuy').removeClass('text_gobuy_show');
            $(obj).find('.search_y').animate({left:'100',opacity:0},300);
            biankuang1(obj);
        }
    );
});



//

</script>
</body>
</html>